<template>
	<view style="padding-bottom: 160rpx;">
		<view class="my-bg" :style="{ backgroundImage: 'url(' + bgImageUrl + ')' }">
			<uv-navbar :fixed="false" leftIconSize="0" bgColor="transparent" title="我的" :safeAreaInsetTop="true">
			</uv-navbar>
			<view class="rank-list">
				<view class="avatar-box" @click.stop="touserPage">
					<image v-if="userstore.userInfo.avatar!=''" :src="baseImgurl+'/'+userstore.userInfo.avatar" mode="aspectFill"></image>
					<image src="@/static/images/avatar.png" mode="aspectFill" v-else></image>
				</view>
				<view class="rank-info" @click.stop="edit">
					<view class="rank-item">
						<view class="nickname">
							{{userstore.userInfo.username=="微信用户"?'未知用户':userstore.userInfo.username}}
						</view>
						<view class="auth" v-if="userstore.userInfo.examine==0">
							未认证
						</view>
						<view class="self-auth" v-if="userstore.userInfo.examine==1">
							<image src="@/static/images/self.png" mode="widthFix"></image>
							<text class="self">个人</text>
						</view>
						<view class="qiye-auth" v-if="userstore.userInfo.examine==2">
							<image src="@/static/images/qiye.png" mode="widthFix"></image>
							<text class="qiye">企业</text>
						</view>
					</view>
					<view class="adress-info">
						<view class="age-tips" v-if="userstore.userInfo.sex!=0" :style="[{backgroundColor:(userstore.userInfo.sex==1?'#D9EAFF':'#fff1f3')}]">
							<image v-if="userstore.userInfo.sex==1" src="@/static/images/man.png" mode="widthFix">
							</image>
							<image v-if="userstore.userInfo.sex==2" src="@/static/images/women.png" mode="widthFix">
							</image>
							<view :class="[userstore.userInfo.sex==1? 'man-age':'woman-age']">{{userstore.userInfo.age}}后</view>
						</view>
						<view class="age_noselect" v-else>{{userstore.userInfo.sex_text}}</view>
						<view class="city-address">
							<!-- {{userstore.userInfo.province_text}} -->
							{{userstore.userInfo.city_text}}
						</view>
						<view class="city-address">ID：{{userstore.userInfo.account}}</view>
					</view>
				</view>
				<view class="invite-btns" @click.stop="edit">
				编辑资料	<image src="../../static/images/enter.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="introduce">{{userstore.userInfo.desc?userstore.userInfo.desc:'这家伙是条咸鱼，还不想翻身'}}</view>
			<view class="fans-num">
				<view class="followers-item" @click="tofollow">
					<view class="followers-num">{{userstore.userPageInfo.follow_count}}</view>
					<view class="followers-title">关注</view>
				</view>
				<view class="line">
				</view>
				<view class="followers-item" @click="tofans">
					<view class="followers-num">
						{{userstore.userPageInfo.fans_count}}
					</view>
					<view class="followers-title">粉丝</view>
				</view>
				<view class="line">
				</view>
				<view class="followers-item" @click="toInvitation">
					<view class="followers-num">
						{{userstore.userPageInfo.share_count}}
					</view>
					<view class="followers-title">已邀</view>
				</view>
			</view>
			<view class="my-function">
				<view class="function-item" @click="jump(4)">
					<image src="../../static/images/my_apply.png" mode="aspectFit"></image>
					<view class="function-title">
						我的报名
					</view>
				</view>
				<view class="function-item" @click="jump(1)">
					<image src="../../static/images/my_sub.png" mode="aspectFit"></image>
					<view class="function-title">
						我的发布
					</view>
				</view>
				<view class="function-item" @click="jump(3)">
					<image src="../../static/images/my_collent.png" mode="aspectFit"></image>
					<view class="function-title">
						我的收藏
					</view>
				</view>
				<view class="function-item" @click="jump(2)">
					<image src="../../static/images/wallent.png" mode="aspectFit"></image>
					<view class="function-title">
						我的钱包
					</view>
				</view>
			
				
			</view>

		</view>
		<view class="invite-banner">
			<uv-swiper height="90" :list="bannerList" @click="toLinkUrl"></uv-swiper>
		</view>
		<view class="footer">
			<view class="footer-item" style="padding-top: 0;" @click="jump(5)">
				<view class="item-title">
					<image src="../../static/images/invate.png" mode="aspectFill"></image>
					<view class="title">
						邀请好友
						<uv-badge absolute :offset="[-4,-42]" value="送伴豆" shape="horn"></uv-badge>
					</view>
				</view>
				<view class="enter">
					<image src="../../static/images/enter.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="footer-item" @click="jump(6)">
				<view class="item-title">
					<image src="../../static/images/renzheng.png" mode="aspectFill"></image>
					<view class="title">
						实名认证
						<uv-badge absolute :offset="[-4,-42]" value="送伴豆" shape="horn"></uv-badge>
					</view>
				</view>
				<view class="enter">
					<image src="../../static/images/enter.png" mode="aspectFill"></image>
				</view>
			</view>
			<button class="footer-item" plain size="mini" style="backgroundColor:#fff;" open-type="contact" type="default">
				<view class="item-title">
					<image src="../../static/images/kefu.png" mode="aspectFill"></image>
					<view class="title">
						联系客服
					</view>
				</view>
				<view class="enter">
					<image src="../../static/images/enter.png" mode="aspectFill"></image>
				</view>
			</button>
			<view class="footer-item" @click="jump(8)">
				<view class="item-title">
					<image src="../../static/images/feedback.png" mode="aspectFill"></image>
					<view class="title">
						意见反馈
					</view>
				</view>
				<view class="enter">
					<image src="../../static/images/enter.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="footer-item" style="border: 0;" @click="jump(9)">
				<view class="item-title">
					<image src="../../static/images/set.png" mode="aspectFill"></image>
					<view class="title">
						设置
					</view>
				</view>
				<view class="enter">
					<image src="../../static/images/enter.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<tabbar :current="4"></tabbar>
	</view>
</template>

<script setup>
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	import tabbar from '@/components/tabbar/tabbar' //引用组件中的tabbar
	import { useActiveStore } from '@/store/modules/active.js'
	const userstore = useUserStore()
	const activeStore = useActiveStore()
	const bgImageUrl = ref('https://tazisocializing.pusiyun.cn/uploads/20240721/2680d77b9ff79e0eee368834371475a0.png')
	const baseImgurl = ref('')
	const bannerList = ref([])
	const bannerLinkUrlList = ref([])
	// onLoad(() => {
	// 	getBannerList()
	// })
	onShow(async () => {
		baseImgurl.value = uni.getStorageSync('baseUrl')
		let res = await userstore.getUserInfo()
		if (res.code == 200) {
			userstore.getUserPage({
				user_id: userstore.userInfo.id
			})
		}
		getBannerList()
	})
	const tofollow = () => {
		uni.navigateTo({
			url: '/pages/user/follow/index'
		})
	}
	const tofans = () => {
		uni.navigateTo({
			url: '/pages/user/fans/index'
		})
	}
	const toInvitation=()=>{
		uni.navigateTo({
			url: '/pages/user/fans/invitation'
		})
	}
	// 跳转
	const jump = (num) => {
		
		switch (num) {
			case 1:
				uni.navigateTo({
					url: '/pages/user/release/index'
				})
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/user/wallet/index'
				})
				break;
			case 3:
				uni.navigateTo({
					url: '/pages/user/collect/index'
				})
				break;
			case 4:
				uni.navigateTo({
					url: '/pages/user/applylist/index'
				})
				break;
			case 5:
				uni.navigateTo({
					url: '/pages/user/sharecanva/index'
				})
				break;
			case 6:
				uni.navigateTo({
					url: '/pages/user/auth/index'
				})
				break;
			case 7:
				// uni.navigateTo({
				// 	url:'/pages/user/auth/index'
				// })
				break;
			case 8:
				uni.navigateTo({
					url: '/pages/user/feedback/index'
				})
				break;
			case 9:
				uni.navigateTo({
					url: '/pages/user/set/index'
				})
				break;
			default:
				break;
		}
	}
	// 获取banner图
	const getBannerList = async () => {
		let res = await activeStore.getBannerList({
			position: 4
		})
		if (res.code == 200) {
			bannerLinkUrlList.value = res.data
			bannerList.value = res.data.map(item => {
				return baseImgurl.value + item.image
			})
		}
	}
	const toLinkUrl = (e) => {
		if (bannerLinkUrlList.value[e].path != "") {
			if (isExternalLink(bannerLinkUrlList.value[e].path)) {
				uni.navigateTo({
					url: `/pages/webView/webView?path=${bannerLinkUrlList.value[e].path}`
				})
			} else {
				uni.navigateTo({
					url: `/${bannerLinkUrlList.value[e].path}`
				})
			}
		}
		// uni.navigateTo({
		// 	url: bannerLinkUrlList.value[e].path
		// })
	}
	const isExternalLink = (url) => {
		// 判断是否以 http:// 或 https:// 开头
		const isExternal = /^(http|https):\/\//i.test(url);
	
		return isExternal;
	}
	const edit = () => {
		uni.navigateTo({
			url: '/pages/user/edit/index'
		})
	}
	const touserPage = () => {
		if (uni.getStorageSync('token') != '') {
			uni.navigateTo({
				url: '/pages/user/userpage/index?userId=' + userstore.userInfo.id
			})
		} else {
			uni.redirectTo({
				url: '/pages/login/index'
			})
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.my-bg {
		background-size: cover;
		width: 100%;
	}

	.rank-list {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		padding: 0 40rpx;

		.avatar-box {
			image {
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.rank-info {
			flex: 1;
			margin-left: 24rpx;

			.rank-item {
				display: flex;
				align-items: center;

				.nickname {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}

				.auth {
					width: 90rpx;
					height: 36rpx;
					line-height: 36rpx;
					background: #FFFFFF;
					border-radius: 18rpx;
					border: 1rpx solid #D8D8D8;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					text-align: center;
					margin-left: 8rpx;
				}

				.qiye-auth {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 8rpx;
					width: 92rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					border: 1rpx solid #FFA319;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.qiye {
						margin-left: 8rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFA319;
					}
				}

				.self-auth {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 8rpx;
					width: 92rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					border: 1rpx solid #1980FF;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.self {
						margin-left: 8rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #1980FF;
					}
				}
			}

			.adress-info {
				display: flex;
				align-items: center;
				margin-top: 22rpx;

				.age-tips {
					display: flex;
					align-items: center;
					// width: 88rpx;
					height: 32rpx;
					padding: 8rpx;
					background: #D9EAFF;
					border-radius: 20rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.man-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #2484FF;
						text-align: center;
					}

					.woman-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF4770;
						text-align: center;
					}

				}

				.city-address {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

		}

		.invite-btns {
			display: flex;
			align-items: center;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.introduce {
		padding: 40rpx 0 60rpx 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.fans-num {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 80rpx;

		.followers-item {
			.followers-num {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
				text-align: center;
			}

			.followers-title {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: center;
			}

		}

		.line {
			width: 2rpx;
			height: 48rpx;
			background: #C9C9C9;
		}
	}

	.my-function {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 40rpx 30rpx 0rpx 30rpx;
		width: 690rpx;
		height: 208rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.function-item {
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.function-title {
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
			}
		}
	}

	.invite-banner {
		margin: auto;
		margin-top: 30rpx;
		width: 690rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.footer {
		padding: 48rpx 40rpx 0 40rpx;
		margin: 30rpx auto;
		width: 690rpx;
		// height: 624rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(153, 153, 153, 0.06);
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.footer-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F7F8FA;
			padding: 40rpx 0;
			border-top: 0;
			border-left: 0;
			border-right: 0;

			.item-title {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.title {
					position: relative;
					padding-left: 30rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;

					.dot {
						padding: 0 10rpx;
						width: 95rpx;
						height: 40rpx;
						background: #FF0000;
						border-radius: 16rpx 16rpx 16rpx 0rpx;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}

			.enter {
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

	}
</style>